<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <canvas width="160" height="40" id="canvas"></canvas>
    <input type="text">
    <script>
        function getRandom(max, min) {
            return parseInt(Math.ceil(Math.random() * (max - min + 1)) + min)
        }
        const ipt = document.querySelector('input')

        function getColor(max, min) {
            let r = getRandom(max, min);
            let g = getRandom(max, min);
            let b = getRandom(max, min);
            return `rgb(${r},${g},${b})`
        }
        const myCancas = document.querySelector('#canvas');
        var ctx = myCancas.getContext("2d");
        const w = myCancas.clientWidth;
        const h = myCancas.clientHeight;
        ctx.fillStyle = getColor(230, 180);
        ctx.fillRect(0, 0, w, h);
        // 随机数字
        const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz23456789";
        const arr = []
        let ZKSstr = ''
        for (let i = 0; i < 5; i++) {
            let chartAt = str.charAt(getRandom(0, str.length));
            ZKSstr += chartAt.toLowerCase();
            // 字体大小
            let fs = getRandom(18, 40);
            // 随机字目的角度
            let deg = getRandom(-30, 30);
            ctx.font = fs + 'px Verdana';
            ctx.textBaseline = "top";
            ctx.fillStyle = getColor(80, 150);
            ctx.save();
            ctx.translate(30 * i + 15, 15);
            ctx.rotate(deg * Math.PI / 180);
            ctx.fillText(chartAt, -10, -10);
            ctx.restore()
        }
        // 干扰线
        for (let i = 0; i < 4; i++) {
            ctx.beginPath();
            ctx.moveTo(getRandom(0, w), getRandom(0, h))
            ctx.lineTo(getRandom(0, w), getRandom(0, h));
            ctx.strokeStyle = getColor(180, 100);
            ctx.closePath()
            ctx.stroke()
        }
        // 干扰圆点
        for (let i = 0; i < 100; i++) {
            ctx.beginPath();
            ctx.fillStyle = getColor(180, 100);
            ctx.arc(getRandom(0, w), getRandom(0, h), 0.5, 0, Math.PI * 2, )
            ctx.closePath()
            ctx.fill()
        }
        console.log(ZKSstr, '小写');
        ipt.onchange = function(e) {
            console.log(ZKSstr.toLowerCase() === e.target.value);
        }
    </script>
</body>

</html>